<template>
  <div class="layout">
    <!-- 头部用户信息栏 -->
    <div class="header">
      用户信息区域
    </div>

    <el-container class="main-container">
      <!-- 左侧菜单栏 -->
      <el-aside width="200px" class="menu-aside">
        <el-menu
          default-active="1"
          collapse-transition
          :collapse="isCollapse"
          background-color="#FFFFFF"
          text-color="#333"
          active-text-color="#409EFF"
        >
          <el-sub-menu index="1">
            <template #title><i class="el-icon-menu"></i> 客户管理</template>
            <el-menu-item index="1-1">客户新增</el-menu-item>
            <el-menu-item index="1-2">客户修改</el-menu-item>
            <el-menu-item index="1-3">客户删除</el-menu-item>
            <el-menu-item index="1-4">客户查询</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title><i class="el-icon-briefcase"></i> 业务管理</template>
            <el-menu-item index="2-1">业务录入</el-menu-item>
            <el-menu-item index="2-2">业务修改</el-menu-item>
            <el-menu-item index="2-3">业务删除</el-menu-item>
            <el-menu-item index="2-4">业务查询</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title><i class="el-icon-paperclip"></i> 工单管理</template>
            <el-menu-item index="3-1">派单</el-menu-item>
            <el-menu-item index="3-2">收单</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title><i class="el-icon-box"></i> 库存管理</template>
            <el-menu-item index="4-1">物资入库</el-menu-item>
            <el-menu-item index="4-2">物资出库</el-menu-item>
            <el-menu-item index="4-3">物资修改</el-menu-item>
            <el-menu-item index="4-4">物资查询</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 主内容区域，根据路由动态显示 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>



<script setup>
import { ref } from 'vue';
// 引入 Element Plus 所有需要的组件
import { ElContainer, ElAside, ElMenu, ElSubMenu, ElMenuItem, ElMain } from 'element-plus';
// 注册组件
import 'element-plus/dist/index.css';
const isCollapse = ref(false); // 控制菜单栏折叠状态
</script>



<style scoped>
.layout {
  display: flex;
  height: 100vh; /* 使用整个视口高度 */
  overflow: hidden;
}

.header {
  width: 100%;
  padding: 0 20px;
  line-height: 60px; /* 行高与高度一致，垂直居中文字 */
  background-color: #f0f0f0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.main-container {
  display: flex;
  flex: 1;
}

.menu-aside {
  background-color: #FFFFFF;
}

.el-menu {
  border-right: none; /* 移除菜单的右边框 */
}
</style>
